<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String sipversion ="1.0.10";
	String sdkversion = "0.2.3";
%>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTf-8">
<title>轻客CRM呼叫中心</title>
<link rel="icon" type="image/ico" href="/images/favicon.png">
<link rel="stylesheet" type="text/css" href="https://g.alicdn.com/acca/workbench-sdk/<%=sdkversion %>/main.min.css">
<!--sdk js文件-->
<script type="text/javascript" src="//g.alicdn.com/crm/acc-phone/<%=sipversion %>/SIPml-api.js"></script>
<script type="text/javascript" src="//g.alicdn.com/crm/acc-phone/<%=sipversion %>/index.js"></script>
<script type="text/javascript" src="https://g.alicdn.com/acca/workbench-sdk/<%=sdkversion %>/workbenchSdk.js"></script>
 <script type="text/javascript" src="/js/jquery-2.2.3.min.js"></script>
</head>
<body>


    <style>
        *{
        margin: 0;
        padding: 0;
        }
        .mini-workbench {
        position: fixed;
        border-radius: 100%;
        height: 50px;
        line-height: 50px;
        width: 50px;
        text-align: center;
        background: #00c1de;
        color: white;
        cursor: pointer;
        bottom: 44px;
        right: 100px;
        }

        .test-call {
        cursor: pointer;
        color: #00c1de;
        }

        #workbench {
        font-size: 14px;
        color: #4F5357;
   
        width: 480px;
        background: #FFFFFF;
        border: 0px solid #D7D8D9;
        box-shadow: 0 1px 4px 0 rgba(55, 61, 65, 0.14);
        bottom: 101px;
        right: 100px;
        transition: all .3s;
        }

        #test {
        position: fixed;
        width: 265px;
        background: #FFFFFF;
        top: 150px;
        right: 400px;
        }
    </style>
    <div id="app">
<!--     <div onclick="openWorkbench()" class="mini-workbench">
        云呼
    </div> -->
    <div id="workbench">
   
    
    </div>
</div>
<!-- <div>
    <h2 onclick="call()" class="test-call">拨号测试:135012345678</h2>
    <button onClick="applyBreak()">测试小休</button>
    <div id="test"></div>
</div> -->
<script type="text/javascript">
    !(function (win) {
      var calllog =null;
      win.workbench = new win.WorkbenchSdk({
        dom: 'workbench',
        width: '480px',
        instanceId: '${instanceId}',
        ajaxPath: '/aliyun/ccc/api',
        ajaxMethod: 'post',
        afterCallRule: 2,
        useLocalStorageToCall:true,
        header: false,
       // autoAnswerCall: 5,
        // moreActionList: ['break', 'offline'],
        // outsideComponents: [{
        //   componentName: 'transfer',
        //   dom: 'test',
        //   btnStyle: { color: 'pink', background: 'gray' }
        // }],
        onErrorNotify: function (error) {
          console.warn(error)
        },
        onCallComing: function (aa, bb, cc, dd) {
          console.log(aa, bb, cc, dd);
         // window.open("http://192.168.0.128:8443/customer/phoneNumber/135012345678")
        },
        onCallDialing: function (connid, caller, calee, contactId) {
        	 
         calllog  = {connid : connid,caller : caller,calee : calee,contactId : contactId,type:0}
        //  console.log(aa, bb, cc, dd);
        },
        onStatusChange: function (code, lastCode, context){
       
          console.log(code, lastCode, context);
        },
        onHangUp :function(aa){
        	  if(aa=="outbound"){
        			$.ajax({
           				type : "post",
           				data : calllog,
           				url : "/sys/calllogsave",
           				dataType : "json",
           				success : function(data){
           				}
           			});
        	} 
        	console.log(aa);
        },
        onInit:function(){
        	// this.register();
        }

 
      })
      //面板展示开关
      win.workbenchOpen = true;
    // win.workbenchOpen.changeVisible(false)
      openWorkbench = function () {
        var workbenchWrapper = document.querySelector("#workbench");
        var floater = document.querySelector(".mini-workbench");
        win.workbench.changeVisible(win.workbenchOpen);
        if (!win.workbenchOpen) {
          workbenchWrapper.style.display = 'none';
          floater.innerHTML = '云呼';
        } else {
          workbenchWrapper.style.display = 'block';
          floater.innerHTML = 'X';
        }
        win.workbenchOpen = !win.workbenchOpen
      }

      call = function () {
        win.workbench.call("18948354468")
      }

      applyBreak = function () {
        var yes = prompt("请输入：小休id-小休名称（请不要输入0-default", "1-wc");
        if(yes){
          var id = yes.split("-")[0] || 1;
          var name = yes.split("-")[1] || 'wc';
          win.workbench.applyForBreak(id, name);
        }
      }
      
    })(window)

</script>
</body>
</html>